<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue学习</title>
	<script src="js/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

</head>
<body>
<div id="app" >
  <myparent :imgsrc2='img' :imgtitle2='title'></myparent>
</div> 

<!-- parent模板 -->
<template id="my_parent">
  <div>
      <child11 :imgsrc1='imgsrc2'></child11>
      <child22 :imgtitle1='imgtitle2'></child22>
  </div>
</template>

<!-- child1模板 -->
<template id='my_img'>
    <img :src="imgsrc1">
</template>

<!-- child2模板 -->
<template id='my_title'>
    <p>{{imgtitle1}}</p>
</template>

</body>
</html>

<script> 
  //注册子组件
 let child1 =Vue.extend({
    template:'#my_img',
    props:['imgsrc1']
 });

  let child2 =Vue.extend({
    template:'#my_title',
    props:['imgtitle1']
 });

//注册父组件
Vue.component('myparent',{
  template:'#my_parent',
  props:['imgsrc2','imgtitle2'],
  components:{
    'child11':child1,
    'child22':child2
  }

});

 new Vue({
  el: '#app',
  data:{
    title:'我是不是很漂亮',
    img:'img/head.png'

  },
  methods:{
    
  }


})
</script>